<template>
  <van-popup
    :value="value"
    @click-close-icon="$emit('change',false)"
    closeable
    position="left"
  >
    <div class="article-channel">
        <div class="head">
            <h3>我的频道<small>点击进入频道</small></h3>
            <a class="edit" @click="isEdit=!isEdit" :class="isEdit?'edit active':'edit'" href="javascript:;">编辑</a>
        </div>
        <div class="body">
            <a href="javascript:;" :class="{active:activeIndex===index}"  @click="enterChannel(index)" v-for="(channel,index) in myChannels" :key="channel.id">{{channel.name}}
                <zgticon @click.native.stop="delChannel(channel.id)" v-show="(isEdit && (index!=activeIndex) && index!==0 )" class="boke-icon" name="tag-close"></zgticon>
            </a>
        </div>
        <div class="head" style="margin-top:12px">
            <h3>频道推荐</h3>
        </div>
        <div class="body">
            <a @click="addChannel(channel)" href="javascript:;" v-for="channel in optionChannels" :key="channel.id">+ {{channel.name}}</a>
        </div>
    </div>
  </van-popup>
</template>
<script>
import { getAllchannels, addMyChannels, delMyChannel } from '@/api/channel.js'
export default {
  // zgticon上的click的stop是阻止冒泡事件 防止返回
  name: 'articleChannel',
  // 相当于重新定义了组件的v-model属性 prop传值为value 发布的事件为change事件
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    // 删除选中的列表功能
    delChannel (id) {
      console.log('delete')
      delMyChannel(id).then((data) => {
        // 1.先把mychannels获取过来
        var channels = [...this.myChannels]
        channels = channels.filter((item) => {
          return item.id !== id
        })
        console.log(data)
        this.$emit('changeChannel', channels)
      })
    },
    // 添加
    async addChannel (channel) {
      // 1.获取mychannels 数组深拷贝
      const channels = [...this.myChannels]
      // 2.将点击的频道添加到mychannels
      channels.push({
        id: channel.id,
        name: channel.name
      })
      channels.forEach((item, index) => {
        item.seq = index + 1
      })
      // 3.请求添加频道
      const data = await addMyChannels(channels)
      console.log(data)
      // 4.操作mychannels
      this.$emit('changeChannel', data.channels)
    },
    // 在频道列表页面点击频道进入
    enterChannel (index) {
      // 1.关闭频道列表页面
      this.$emit('change', false)
      // 2.修改父组件中的activeIndex的值
      this.$emit('update:activeIndex', index)
    },
    // 获取所有的频道列表
    getChannels () {
      getAllchannels().then((data) => {
        // console.log(data)
        this.allChannels = data.channels
      })
    }

  },
  // 自动计算剩余的频道
  computed: {
    optionChannels () {
      // 返回所有的频道列表 - 我的频道列表
      return this.allChannels.filter((item) => {
        return !this.myChannels.find((i) => {
          return i.id === item.id
        })
      })
    }
  },
  created () {
    this.getChannels()
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  props: {
    // 动态绑定的value值
    // v-model:   等同于以下两个操作
    //  :value
    //  @change=""
    value: {
      type: Boolean,
      default: false
    },
    myChannels: {
      type: Array,
      default: () => []
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  }
}
</script>
<style scoped lang="less">
.van-popup {
  width: 100%;
  height: 100%;
  ::v-deep .van-popup__close-icon {
    font-size: 20px;
    right: 12px;
    top: 12px;
  }
}
.article-channel {
  margin-top: 88px;
  .head {
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    padding-bottom: 24px;
    h3 {
      font-size: 32px;
      color: #333;
      margin: 0;
      small {
        font-size: 24px;
        color: #999;
        margin-left: 20px;
      }
    }
    .edit {
      float: right;
      height: 44px;
      width: 104px;
      line-height:44px;
      text-align: center;
      color: #DE644B;
      border-radius: 22px;
      border: 2px solid #DE644B;
      font-size: 24px;
      &.active {
        color: #fff;
        background: #DE644B;
      }
    }
  }
  .body {
    padding: 0 12px 0 32px;
    a {
      position: relative;
      .boke-icon {
        position: absolute;
       top: -5px;
       right: -5px;
       line-height: 1;
      }
      display: inline-block;
      padding: 0 16px;
      font-size:28px;
      color: #3A3948;
      background: #F7F8FA;
      height: 72px;
      line-height: 72px;
      min-width: 156px;
      margin-right: 20px;
      margin-bottom: 24px;
      border-radius: 36px;
      text-align: center;
      &.active {
        color: @boke-color;
      }
    }
  }
}

</style>
